<template>
  <div class="carryway-and-address">
    <div v-if="showAddress" class="block">
      <header>
        <h2 class="required">收货地址</h2>
        <el-divider direction="vertical"></el-divider>
        <el-link type="primary" @click="openAddressAddDialog"
          >新增收货地址</el-link
        >
      </header>
      <section>
        <el-radio-group
          v-model="address"
          class="w100p address-group"
          @change="onChangeAddress"
        >
          <el-row v-for="item in rows_address" :key="item.id">
            <el-col
              class="address-item"
              :class="{ highline: item.id === address }"
            >
              <el-radio-button :label="item.id" class="title">
                <div class="name">{{ item.userName }}</div>
              </el-radio-button>
              <el-divider direction="vertical"></el-divider>
              <span class="detail">{{ item.userName }}</span>
              <el-divider direction="vertical"></el-divider>
              <span class="detail"
                >{{ item.province }} {{ item.city }} {{ item.area }}
                {{ item.detailedAddress }}</span
              >
              <el-divider direction="vertical"></el-divider>
              <span class="detail">{{ item.userPhone }}</span>
            </el-col>
          </el-row>
          <div v-if="showMoreAddress" class="more">
            <el-button
              v-if="toggleMoreAddress === false"
              type="text"
              @click="onClickMoreAddress"
            >
              更多地址
              <i class="el-icon-arrow-down"></i>
            </el-button>
            <el-button v-else type="text" @click="onClickLessAddress">
              收起
              <i class="el-icon-arrow-up"></i>
            </el-button>
          </div>
        </el-radio-group>
      </section>
    </div>
  </div>
</template>

<script>
import { AddressAddDialogService } from '~/modules/address/address-add.dialog.module';

export default {
  inject: ['apiMMallWeb'],
  props: {
    addressId: String,
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rows_address_full: [],
      rows_address: [],
      address: '',
      toggleMoreAddress: false,
      showMoreAddress: false,
      showAddress: true
    };
  },
  computed: {
    addressAddDialogService() {
      return new AddressAddDialogService(this.$axios);
    }
  },
  watch: {
    addressId: {
      handler(val) {
        this.address = val;
        const address = this.rows_address.find(item => item.id === val);
        this.$emit('change-address', address);
      },
      immediate: true
    }
  },
  async created() {
    await this.reloadAddress();
  },
  methods: {
    onChangeAddress(value) {
      this.$emit('update:addressId', value);
      const address = this.rows_address.find(item => item.id === value);
      this.$emit('change-address', address);
    },
    onClickMoreAddress() {
      this.rows_address = this.rows_address_full;
      this.toggleMoreAddress = true;
    },
    onClickLessAddress() {
      this.rows_address = this.rows_address_full.slice(0, 3);
      this.toggleMoreAddress = false;
    },
    openAddressAddDialog() {
      this.addressAddDialogService
        .create({
          title: '新增收货地址',
          query: {},
          // eslint-disable-next-line no-unused-vars
          confirmButtonClickHandler: (_data = {}) => {
            this.reloadAddress();
            // 刷新完后，默认选中刚新增的记录上
            // console.log(data);
            // this.address = data.id
          }
        })
        .mount();
    },
    async reloadAddress() {
      const resultAddress = await this.apiMMallWeb.GetOrderAddressListOrderAddressV1ApiPOST(
        {}
      );
      this.rows_address_full = resultAddress;
      // qiyu 2020-3-23 当编辑状态，地址不带分页全部显示 by 常佳
      if (this.isEdit === false) {
        this.rows_address = this.rows_address_full.slice(0, 3);
      } else {
        this.rows_address = this.rows_address_full;
      }
      this.showMoreAddress =
        this.rows_address_full.length > this.rows_address.length;
    }
  }
};
</script>

<style lang="less">
.carryway-and-address {
  .address-group {
    font-size: inherit;
    .address-item {
      margin-bottom: 10px;
      .title .el-radio-button__inner {
        width: 120px;
        .name {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .more {
      width: 120px;
      text-align: center;
    }
  }
  .highline {
    color: #2371c5;
    font-weight: bold;
  }
}
</style>
